<template>
	<div class="comList">
		<h3>最新评论</h3>
		<div v-for="item in commentList" :key="item.id" class="item">
			<div class="head">
				<a href="javascript:;"><img :src="item.user.avatarUrl" alt="" /></a>
			</div>
			<div class="cntwrap">
				<div class="cnt">
					<a href="javascript:;"> {{ item.user.nickname }} </a>：{{
						item.content
					}}
				</div>
				<div class="rp">
					<span class="time">{{ item.timeStr }}</span>
					<a href="javascript:;"> <i class="icn"></i> (3201) </a>
					<span class="sep">|</span>
					<a href="javascript:;">回复</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "ComList",
	components: "{}",
};
</script>

<script setup>
import { defineProps, watch, ref } from "vue";
import { getCommentList } from "@/api/Recommended";

const props = defineProps({
	playListId: {
		playListId: Number,
		required: true,
	},
});

const commentList = ref([]);

watch(props, (newValue, oldValue) => {
	GetCommentList(props.playListId);
});

const GetCommentList = async (id) => {
	const data = await getCommentList(id);
	commentList.value = data.comments;
};
</script>

<style lang="less" scoped>
a:hover {
	text-decoration: underline;
}
.comList {
	margin-top: 20px;
	h3 {
		position: relative;
		top: 1px;
		height: 20px;
		font-size: 12px;
		border-bottom: 1px solid #cfcfcf;
	}
	.item {
		padding: 15px 0;
		border-top: 1px dotted #ccc;
		.head {
			float: left;
			width: 50px;
			height: 50px;
			margin-right: -100px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.cntwrap {
			margin-left: 60px;
			.cnt {
				width: 100%;
				overflow: hidden;
				line-height: 20px;
				word-break: break-word;
				a {
					color: #0c73c2;
					margin-right: 5px;
				}
			}
			.rp {
				margin-top: 15px;
				text-align: right;
				.time {
					float: left;
					margin: 0 !important;
					color: #999;
				}
				a {
					.icn {
						width: 15px;
						height: 14px;
						display: inline-block;
						overflow: hidden;
						margin-right: 5px;
						vertical-align: -2px;
						background: url(@/image/icon2.png) no-repeat 0 9999px;
						background-position: -150px 0;
					}
				}
				.sep {
					margin: 0 8px;
					color: #ccc;
				}
			}
		}
	}
}
</style>
